<template>
  <div class="box">
    <!-- 页面顶部 -->
    <div class="header">
      这里是头部
      <div class="return">返回按钮</div>
      <div class="setting">设置按钮</div>
      <div class="pendant">这里是挂件</div>
      <div class="headimg"></div>
    </div>
    <!-- 中间 -->
    <!-- 中间左侧 -->
    
    <!-- 中间中间 -->
    <div class="center">
      <div>上传视频</div>
      <div class="videobox">

      </div>
      <div>浏览记录</div>
      <div class="videobox">

      </div>
      <div>缓存视频</div>
      <div class="videobox">
        
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped>
.header {
  width: 100%;
  height: 300px;
  background-color: aqua;
}

.return {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 50px;
  top: 50px;
}

.setting {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  right: 50px;
  top: 50px;
}
.headimg {
  width: 150px;
  height: 150px;
  border-radius: 200px;
  background-color: blue;
  position: absolute;
  top: 225px;
  left: 50%;
  transform: translateX(-50%);
  border: 20px solid white;
}

.aside {
  width: 400px;
  margin-left: 5px;
  position: absolute;
  top: 500px;
}

.center {
  width: 1000px;
  height: 800px;
  background: red;
  position: absolute;
  left: 50%;
  top: 500px;
  transform: translateX(-50%);
}
</style>